<template>
  <Main
    :data="listData"
    :footer-lock="total > 10"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column
      label="商品名称"
      align="center"
      property="goods_name"
    ></el-table-column>
    <el-table-column label="商品封面" align="center">
      <template slot-scope="scope">
        <img
          :src="
            $store.state.qiniu +
              scope.row.goods_cover.split(',')[0] +
              $store.state.imgRotate
          "
          width="80px"
        />
      </template>
    </el-table-column>
    <el-table-column label="销售价格" align="center" property="peoples">
      <template slot-scope="scope">
        <span v-if="scope.row.sku_low_price == scope.row.sku_up_price"
          >￥{{ scope.row.sku_low_price }}</span
        >
        <span v-else
          >￥{{ scope.row.sku_low_price }} - ￥{{
            scope.row.sku_up_price
          }}</span
        >
      </template>
    </el-table-column>
    <el-table-column label="活动价格" align="center">
      <template slot-scope="scope">
        <span v-if="scope.row.join_low_price == scope.row.join_up_price"
          >￥{{ scope.row.join_low_price }}</span
        >
        <span v-else
          >￥{{ scope.row.join_low_price }} - ￥{{
            scope.row.join_up_price
          }}</span
        >
      </template>
    </el-table-column>

    <el-table-column
      label="砍价类别"
      align="center"
      property="bargain_type"
    ></el-table-column>
    <el-table-column
      label="活动库存"
      align="center"
      property="stock"
    ></el-table-column>
    <!-- <el-table-column
      label="活动排序"
      align="center"
      property="sort"
    ></el-table-column> -->

    <el-table-column
      label="操作"
      align="center"
      fixed="right"
      width="250"
      class-name="tableoperation"
    >
      <template slot-scope="scope">
        <el-button size="mini" type="text" @click="edit(scope.row)">
          编辑
        </el-button>

        <el-button size="mini" type="text" @click="del(scope.row.goods_id)">
          移除
        </el-button>
      </template>
    </el-table-column>
  </Main>
</template>
<script>
import { DELGOODS } from "../../service";

export default {
  props: {
    listData: {
      type: Array,
      default: () => []
    },
    assembleId: {
      type: Number,
      default: -1
    },
    total: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {};
  },
  methods: {
    edit(e) {
      this.$emit("returnVal", e, "edit");
    },
    async del(id) {
      await this.$confirm(
        "是否移除? 移除后无法恢复，商品无法参加此活动",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          DELGOODS({
            id_arr: id,
            activity_type: 4,
            activity_id: this.assembleId
          }).then(({ code, msg }) => {
            if (code === 200) {
              this.$emit("getV");
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        })
        .catch(() => {
          this.$message.info("已取消!");
        });
    },
    handleSelectionChange(v) {
      this.$emit("returnValAll", v, "edit");
    }
  }
};
</script>
